let speed = 6

let timer = 0

let score = 0

const shadow = document.querySelector(".shadow")

const con = document.getElementById("con")
const scoreDom = document.querySelector("span")

// 开始游戏
function start(e) {
    // 去除遮罩层
    shadow.style.display = 'none'

    console.log(con.childNodes.length);

    init()
}

// 点击方块
function tabBox(ev) {

    ev = ev || event
    console.log(ev.target.parentNode);
    judge(ev)

}

function init() {
    for (let i = 0; i < 4; i++) {
        createRow()
    }

    timer = setInterval(() => {
        move()
    }, 30);
}

// 创建div
const createDiv = (classname) => {
    let div = document.createElement('div')
    div.className = classname

    return div
}

// 创建行
const createRow = () => {

    let row = createDiv("row")

    let arr = createCell()

    // 添加cell给row
    for (let i = 0; i < arr.length; i++) {
        row.appendChild(createDiv(arr[i]))

    }

    if (con.firstChild == null) {
        con.appendChild(row)
    } else {
        con.insertBefore(row, con.firstChild)
    }


}

// 删除row
const delRow = () => {

    if (con.childNodes.length == 6) {
        con.removeChild(con.lastChild)
    }
}

// 创建一个cell类目的数组、其中一个为cell black，其余为cell
const createCell = () => {
    let temp = ['cell', 'cell', 'cell', 'cell']
    let i = Math.floor(Math.random() * 4)

    temp[i] = "cell black"

    return temp
}

// 黑块动起来
function move() {

    let top = parseInt(window.getComputedStyle(con, null)['top'])


    if (speed + top > 0) {
        top = 0
    } else {
        top += speed
    }

    // 不断改变top值 让他动起来
    con.style.top = top + 'px'

    over(top)

    if (top == 0) {

        createRow()

        con.style.top = '-25%'
        delRow()

    }


}

// 判断游戏是否结束
const over = (top) => {

    let rows = con.childNodes
    
    if (top == 0 && rows[rows.length - 2].passB !== 1) {
        fail()
    }

    for (let i = 0; i < rows.length; i++) {
        if (rows[i].passW == 1) {
            fail()
        }

    }

}

// 游戏结束
const fail = () => {
    clearInterval(timer)
    shadow.style.display = 'flex'
    
    con.innerHTML = ""
    con.style.top = "-100vh"
    scoreDom.innerHTML = 0
    confirm("很遗憾勇士,就到这里了,你的最终分数是: " + score )
    score = 0
    speed = 6
    console.log("游戏结束");

}

// 判断点击黑块还是白块
const judge = (e) => {

    if (e.target.className.indexOf('black') == -1
        && e.target.className.indexOf('cell') !== -1
    ) {
        console.log("点白块");
        // 表示白块已被点击
        e.target.parentNode.passW = 1
    }

    if (e.target.className.indexOf('black') > 0) {
        updateScore()
        console.log("点黑块");
        e.target.className = 'cell'
        
        e.target.parentNode.passB = 1
        console.log(e.target.parentNode.passB);
    }
}

// 更新分数
function updateScore() {
    
    score = parseInt(scoreDom.innerHTML) + 1

    scoreDom.innerHTML = score

    if(score%10 == 0){
        speedUp()
    }

}

// 加速函数
const speedUp = () => {
    speed += 2
    console.log(speed);
    if(speed == 20){
        alert("开启超神模式")
    }
}